<template>
  <div class="app-container">

    <el-form :inline="true" :model="problemListQuery" class="demo-form-inline" size="small">
      <el-form-item v-if="isLogin">
        <el-select v-model="problemListQuery.process" placeholder="状态" style="width: 100px" clearable>
          <el-option label="未开始" value="2">
            <i class="el-icon-minus" style="color: #ffb800"/> 未开始
          </el-option>
          <el-option label="已解答" value="0">
            <i class="el-icon-check" style="color: #2db55d"/> 已解答
          </el-option>
          <el-option label="尝试过" value="1">
            <i class="el-icon-close" style="color: #ff2d55"/> 尝试过
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-cascader
          v-model="problemListQuery.categoryID"
          :options="categorys"
          :props="{ multiple: false, expandTrigger: 'hover', checkStrictly: true, emitPath: false }"
          placeholder="标签"
          filterable
          clearable
          style="width: 100px"
        />
      </el-form-item>
      <el-form-item>
        <el-input v-model="problemListQuery.search" prefix-icon="el-icon-search" placeholder="搜索题号、编号或内容"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getProblems">查询</el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="text" size="default" @click="toRandomProblem">
          <svg-icon icon-class="random" style="border-radius: 50%; box-shadow: #66b1ff 1px 1px 5px;"/>
          随机一题
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="problems"
      :default-sort="{prop: 'date', order: 'descending'}"
      style="width: 100%"
      stripe
    >
      <el-table-column
        prop="process"
        label="状态"
        width="100">
        <template slot-scope="scope">
          <i v-if="scope.row.process === 2" class="el-icon-minus" style="color: #ffb800"/>
          <i v-else-if="scope.row.process === 0" class="el-icon-check" style="color: #2db55d"/>
          <i v-else class="el-icon-close" style="color: #ff2d55"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="number"
        label="题目"
        sortable>
        <template slot-scope="scope">
          <router-link :to="'/problem/details/' + scope.row.id" target="_blank" class="inlineBlock myProblem">
            {{ scope.row.number }}. {{ scope.row.name }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="likeCount"
        label="点赞量"
        sortable>
        <template slot-scope="scope">
          {{ scope.row.likeCount }}
        </template>
      </el-table-column>
      <el-table-column
        prop="likeCount"
        label="评论量"
        sortable>
        <template slot-scope="scope">
          {{ scope.row.commentCount }}
        </template>
      </el-table-column>
      <el-table-column
        prop="likeCount"
        label="收藏量"
        sortable>
        <template slot-scope="scope">
          {{ scope.row.collectCount }}
        </template>
      </el-table-column>
      <el-table-column
        prop="submitCount"
        label="通过率"
        sortable>
        <template slot-scope="scope">
          {{ (scope.row.passCount / scope.row.submitCount * 100).toFixed(1) }}%
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="page"
      :page-sizes="[5, 10, 15, 30, 50, 100]"
      :page-size="pageSize"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
      @size-change="changSize"
      @current-change="changePage"/>

  </div>
</template>

<script>

import { mapGetters } from 'vuex'

import categoryAPI from '@/api/oj/category'
import problemAPI from '@/api/oj/problem'

export default {
  name: 'Index',

  data() {
    return {
      page: 1,
      total: 0,
      pageSize: 10,
      problemListQuery: {
        page: 1,
        limit: 10,
        categoryID: null,
        search: '',
        process: null,
        status: 1
      },
      categorys: [],
      problems: []
    }
  },

  computed: {
    ...mapGetters([
      'roles'
    ]),
    isLogin() {
      return mapGetters.roles && mapGetters.roles.length > 0
    }
  },

  created() {
    this.getAllCategorys()
    this.getProblems()
  },

  methods: {

    getAllCategorys() {
      categoryAPI.getAllCategorys().then(res => {
        this.categorys = res.result
      }).catch(error => {
        console.log(error)
      })
    },

    getProblems() {
      this.problemListQuery.page = this.page
      this.problemListQuery.limit = this.pageSize
      problemAPI.getAllProblems(this.problemListQuery).then(res => {
        this.total = Number.parseInt(res.result.counts)
        this.problems = res.result.items
      }).catch(error => {
        console.log(error)
      })
    },

    changSize(pageSize) {
      this.pageSize = pageSize
      this.page = 1
      this.getProblems()
    },

    changePage(page) {
      this.page = page
      this.getProblems()
    },

    toRandomProblem() {
      problemAPI.getRandomProblem().then(res => {
        const { href } = this.$router.resolve({
          path: 'problem/details/' + res.result
        })
        window.open(href, '_blank')
      }).catch(error => {
        console.log(error)
      })
    }

  }
}
</script>

<style scoped>

.myProblem:hover {
  color: rgb(64, 158, 255);
}

</style>
